var React = require('react');

import {
    AppRegistry,
    StyleSheet,
    Image,
    Text,
    View
} from 'react-native';

import {styles} from '../common/style';

var HeadApp = React.createClass({
    render: function(){
        return (
            <View style={[styles.head]}>
                <Text>Journalism</Text>
            </View>
        )
    }
});

var MenuApp = React.createClass({
    render: function(){
        return (
            <View style={[styles.menu]}>
                <Text>Journalism</Text>
            </View>
        )
    }
});

var TagMovie = React.createClass({
    render: function(){
        return (
            <View style={[styles.TagGroup]}>
                <View style={[styles.Tags]}><Text style={[styles.TagText]}>热门</Text></View>
                <View style={[styles.Tags]}><Text style={[styles.TagText]}>心情</Text></View>
                <View style={[styles.Tags]}><Text style={[styles.TagText]}>主题</Text></View>
                <View style={[styles.Tags]}><Text style={[styles.TagText]}>语言</Text></View>
                <View style={[styles.Tags]}><Text style={[styles.TagText]}>曲风流派</Text></View>
            </View>
        )
    }
});

var SliderView = React.createClass({
    render: function(){
        return (
            <View style={[styles.sliderGroup]}>
                <Image source={{uri:'http://photocdn.sohu.com/20130531/Img377611040.jpg'}} style={[styles.sliderImg]}/>
            </View>
        )
    }
});

var LoadingView = React.createClass({
    render: function(){
        return (
            <View style={[styles.Loading]}>
                <Text>Loading...</Text>
            </View>
        )
    }
});

module.exports = {
    HeadApp: HeadApp,
    MenuApp: MenuApp,
    TagMovie: TagMovie,
    SliderView: SliderView,
    LoadingView: LoadingView
}